<template>
  <div style="background-color: #f7f7f7;padding-bottom: 130rem;">
    <div class="w100 haed bbg">
      <p class="fz37 cfff hpd tc">主页</p>
      <header class="w100 bsb">
        <div class="avatar">
          <img class="header-avatar" src="../assets/img/login/default_avatar.png" :src="userMsg.avatar">
        </div>
        <p>{{ userMsg.name }}， 欢迎您</p>
      </header>
    </div>
    <div class="cancel mb20 dbc">
      <router-link :to="{ path: '/scancodepage' }" tag="a">
        <img src="../assets/img/login/scan.png"><span>扫码核销</span>
      </router-link>
      <!-- <p class="dam-board"></p> -->
      <router-link :to="{ path: '/cancelinput' }" tag="a">
        <img src="../assets/img/login/write.png"><span>输入核销码</span>
      </router-link>
    </div>

    <main class="dbc mb20 bsb oh">
      <router-link :to="{ path: '/businessstatistics' }">
        <div class="bg1">
          <img src="../assets/img/login/statistics.png">
        </div>
        <p>经营统计</p>
      </router-link>
      <router-link :to="{ path: '/cancelrecord' }">
        <div class="bg2">
          <img src="../assets/img/login/record.png">
        </div>
        <p>核销记录</p>
      </router-link>
      <router-link :to="{ path: '/moneyAccount' }">
        <div class="bg3">
          <img src="../assets/img/login/detail.png">
        </div>
        <p>收支明细</p>
      </router-link>
      <a class="pr" @click="onOrder">
        <div class="bg4">
          <img src="../assets/img/login/order-form.png">
        </div>
        <span class="pa cfff tc hint" :class="{ hintShow1: isHintShow1 }">{{ newOrderNum }}</span>
        <p>订单管理</p>
      </a>
      <router-link :to="{ path: '/couponCom' }">
        <div class="bg5">
          <img src="../assets/img/login/coupon.png">
        </div>
        <p>卡券管理</p>
      </router-link>
      <a class="pr" @click="onTask">
        <div class="bg6">
          <img src="../assets/img/login/task.png">
        </div>
        <span class="pa cfff tc hint" :class="{ hintShow2: isHintShow2 }">{{ newTaskNum }}</span>
        <p>维修任务</p>
      </a>
      <router-link :to="{ path: '/evaluation' }">
        <div class="bg7">
          <img src="../assets/img/login/evaluate.png">
        </div>
        <p>评价管理</p>
      </router-link>
      <router-link :to="{ path: '/buyInfo' }">
        <div class="bg8">
          <img src="../assets/img/login/datum.png">
        </div>
        <p>用户资料</p>
      </router-link>
      <router-link :to="{ path: '/activity' }" style="margin-bottom: 0;">
        <div class="bg9">
          <img src="../assets/img/login/activity.png">
        </div>
        <p>活动发布</p>
      </router-link>
    </main>
    <footer class="bsb dbc">
      <div class="w100 bsb pb20 mb20 inform">
        <h3>
          <img src="../assets/img/login/inform.png">
          <span class="f30">最新通知</span>
        </h3>
        <a @click="onTask">
          今日需上门取车任务共{{ toDayNewTaskNum }}单
          <img src="../assets/img/login/pack-up.png">
        </a>
      </div>
      <table class="w100 tc">
        <tr style="color:#333">
          <td>用户</td>
          <td>项目</td>
          <td>时间</td>
        </tr>
        <tr class="tableContent" v-for="el in tableData">
          <td>{{ el.userName }}</td>
          <td>{{ el.serviceItem }}</td>
          <td>{{ el.bookingTime | filterTime }}</td>
        </tr>
      </table>
    </footer>
    <div class="btn">
      <button @click="logOut" id="confirmBtn">退出登录</button>
    </div>
  </div>
</template>

<script>
import { businessList, getBusinessById } from '../api/index'
export default {
  name: 'home',
  mounted() {
    if (this.newOrderNum == 0) {
      this.isHintShow1 = true;
    }
    if (this.newTaskNum == 0) {
      this.isHintShow2 = true;
    }
    businessList({ businessId: JSON.parse(localStorage.getItem('ID')) })
      .then(r => {
        this.$nextTick(()=>{
          localStorage.setItem('order', JSON.stringify(r.data.length));
        })
        this.tableData = [...r.data.slice(-5)];
        if (r.data.length != JSON.parse(localStorage.getItem('order'))) {
          this.newOrderNum = r.data.length - JSON.parse(localStorage.getItem('order'));
          if (this.newOrderNum != 0) {
            this.isHintShow1 = false;
          }
          this.newTaskNum = r.data.length - JSON.parse(localStorage.getItem('order'));
          this.toDayNewTaskNum = this.newOrderNum;
          if (this.newTaskNum != 0) {
            this.isHintShow2 = false;
          }
        }
        this.businessListData = r.data;
      })
      .catch(e => {
        console.log(e);
      })
    getBusinessById({ id: JSON.parse(localStorage.getItem('ID')) })
      .then(r => {
        // this.userMsg.avatar = r.data.gatePicture;
        // this.userMsg.name = r.data.name;
        this.$nextTick(()=>{
          this.userMsg = r.data;
        })
      })
      .catch(e => {
        console.log(e);
      })
  },
  data() {
    return {
      tableData: [],
      newOrderNum: 0,
      newTaskNum: 0,
      toDayNewTaskNum: 0,
      businessListData: null,
      isHintShow1: false,
      isHintShow2: false,
      userMsg: {
        avatar: '',
        name: ''
      }
    }
  },
  methods: {
    onOrder() {
      this.isHintShow1 = true;
      this.newOrderNum = 0;
      this.$router.push({
        name: 'indentManagement',
        params:{
          data: this.businessListData
        }
      })
    },
    onTask() {
      this.isHintShow2 = true;
      this.newTaskNum = 0;
      this.$router.push({
        name: 'maintainTask',
        params: {
          data: this.businessListData
        }
      })
    },
    //  退出登录
    logOut(){
      this.$router.push('login');
      localStorage.removeItem("ID");
      localStorage.removeItem('order');
    }
  },
  filters: {
    filterTime(val) {
      const d = new Date(val); // val 为表格内取到的后台时间
      const month = d.getMonth() + 1 < 10 ? `0${d.getMonth() + 1}` : d.getMonth() + 1;
      const day = d.getDate() < 10 ? `0${d.getDate()}` : d.getDate();
      const hours = d.getHours() < 10 ? `0${d.getHours()}` : d.getHours();
      const min = d.getMinutes() < 10 ? `0${d.getMinutes()}` : d.getMinutes();
      const sec = d.getSeconds() < 10 ? `0${d.getSeconds()}` : d.getSeconds();
      const times = `${d.getFullYear()}-${month}-${day} ${hours}:${min}:${sec}`;
      return times;
    }
  }
}
</script>

<style scoped>
*{
  font-size: 25rem;
}
header {
  display: flex;
  align-items: center;
}

header .avatar {
  width: 140rem;
  height: 140rem;
  border-radius: 50%;
  border: 8rem solid #5498fb;
  margin: 0 20rem 0 40rem;
}

header .header-avatar {
  height: 100%;

}

header p {
  color: #fff;
  font-size: 35rem;
}

.cancel {
  width: 705rem;
  padding: 30rem 0;
  border-radius: 20rem;
  background-color: #fff;
  display: flex;
  justify-content: space-around;
  margin-top: -90rem;
}

.cancel a {
  display: flex;
  width: 50%;
  flex-direction: column;
  box-sizing: border-box;
}
.cancel a:first-child {
  border-right: 1rem solid #f2f2f2;
}
.cancel a:last-child {
  border-left: 1rem solid #f2f2f2;
}

.cancel img {
  height: 75rem;
  color: #333;
  font-size: 25rem;
  display: block;
  margin: 20rem auto;
  margin-bottom: 40rem;
}

.cancel span {
  color: #333;
  text-align: center;
  font-size: 25rem;
  margin-bottom: 20rem;
}

.cancel .dam-board {
  height: 180rem;
  border-left: 1rem solid #f2f2f2;
}

main,
footer {
  width: 705rem;
  border-radius: 20rem;
  background-color: #fff;
  padding: 40rem 50rem;
}

main>a {
  width: 25%;
  float: left;
  text-align: center;
  margin-bottom: 40rem;
  color: #333;
}

main>a>div {
  width: 100rem;
  height: 100rem;
  border-radius: 50%;
  margin: 0 auto;
  margin-bottom: 20rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

main>a img {
  width: 50%;
  height: 50%;
}

main .bg1 {
  background: linear-gradient(to bottom right, #31cfff, #089dfc);
}

main .bg2 {
  background: linear-gradient(to bottom right, #ffb15a, #ff853f);
}

main .bg3 {
  background: linear-gradient(to bottom right, #7ab1ff, #5e98ff);
}

main .bg4 {
  background: linear-gradient(to bottom right, #fed000, #ff9c00);
}

main .bg5 {
  background: linear-gradient(to bottom right, #7ab1ff, #4885ff);
}

main .bg6 {
  background: linear-gradient(to bottom right, #00ecbf, #00da92);
}

main .bg7 {
  background: linear-gradient(to bottom right, #fd8383, #fe5959);
}

main .bg8 {
  background: linear-gradient(to bottom right, #34cfff, #07a7ff);
}

main .bg9 {
  background: linear-gradient(to bottom right, #ffb25b, #ff8941);
}

footer {
  padding: 40rem 28rem;
}

footer .inform {
  display: flex;
  justify-content: space-between;
  border-bottom: 10rem solid #f7f7f7;
}
.btn{text-align: center;margin-top: 71rem;}
button{font-size: 26rem;background-color: #0762e6;color: #fff;border: 0;border-radius: 38rem;line-height: 26rem;width: 520rem;height: 75rem;margin-bottom: 30rem;}

footer .inform h3 {
  display: flex;
  align-items: center;
}

footer .inform h3 img {
  height: 35rem;
  margin-right: 15rem;
}

footer .inform a {
  color: #ff4000;
  display: flex;
  align-items: center;
}

footer .inform a img {
  margin-left: 15rem;
  height: 20rem;
}

table .tableContent td {
  color: #808080;
  padding: 30rem 0;
  border-bottom: 1rem solid #f7f7f7;
}

table .tableContent td:first-child {
  width: 20%;
}

table .tableContent td:last-child {
  width: 40%;
}

table .tableContent:last-child :nth-child(1),
table .tableContent:last-child :nth-child(2),
table .tableContent:last-child :nth-child(3) {
  border: none;
}

.hint {
  width: 25rem;
  height: 25rem;
  line-height: 20rem;
  right: 15rem;
  bottom: 35rem;
  border-radius: 50%;
  background-color: red;
  font-size: 20rem;
  display: block;
}

.hintShow1 {
  display: none;
}

.hintShow2 {
  display: none;
}
</style>